<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-09-22 13:58:08
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-17 14:44:35
 * @Description: 商品详情
-->
<template>
  <view class="con">
    <view>
      <u-navbar title="" leftIconColor="#000" leftIconSize="24px" :autoBack="true" bgColor="rgba(0,0,0,0)"></u-navbar>
      <u-swiper :list="goodsDetails?.goodBannerLst" indicator height="375"></u-swiper>
    </view>
    <view class="conBox">
      <view class="main">
        <view class="detailsBox">
          <view class="title">{{ goodsDetails?.title || "THE MONSTERS - JUMP FOR JOY 搪胶毛绒公仔" }}</view>
          <view class="subTitle">化妆品销量第1名</view>
          <view class="price" style="margin-top: 52rpx"> <text>￥</text>{{ formData.price }} <text style="color: #bebebe">/盒</text></view>
        </view>
      </view>
    </view>
    <view class="conBox">
      <view class="main">
        <CommonTitle title="规格" titleFontSize="32rpx" isShow />
        <HengGoodsItem v-for="(item, index) in orderList" :key="index" :info="item"></HengGoodsItem>
      </view>
    </view>
    <view class="bottomBox">
      <view class="price">
        合计：
        <text class="unit">￥</text>
        <text class="num">{{ formData.endPrice }}</text>
      </view>
      <view class="btn" @click="goPage">立即购买</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { useStore } from "../../stores/counter";
import HengGoodsItem from "../../components/hengGoodsItem.vue";
import CommonTitle from "../../components/commonTitle.vue";
const { goodId, goodType } = defineProps<{
  goodId: string;
  goodType: string;
}>();
const goodsDetails = ref();
const orderList = ref([
  {
    count: 0,
  },
  {
    count: 0,
  },
]);
const formData = ref({
  productId: "",
  count: 1,
  carriage: 0,
  price: 0,
  endPrice: 0,
});
const maxSum = ref(99999);
onBeforeMount(async () => {});

const goPage = async () => {
  console.log(orderList.value);
  return;
  useStore().setGoodsInfo({ ...goodsDetails.value, ...formData.value, goodType });
  uni.navigateTo({
    url: `/pages/goodsDetails/goodsOrder`,
  });
};
</script>

<style lang="less" scoped>
.con {
  padding-bottom: 150rpx;
}
.conBox {
  padding-top: 32rpx;
  background: #fff;
  margin-bottom: 16rpx;
}
.detailsBox {
  .price {
    text {
      font-size: 28rpx;
    }
    font-size: 56rpx;
    font-weight: 500;
    color: #f94a15;
    line-height: 36rpx;
    margin-top: 20rpx;
    del {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 34rpx;
    }
  }
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    line-height: 50rpx;
    margin-top: 26rpx;
  }
  .subTitle {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #bebebe;
    line-height: 40rpx;
    margin-top: 16rpx;
  }
}
</style>
